<template>
  <div>
    <div class="indexBj">
      <div class="left">
        <div class="leftTop">
          <h4>接入资源</h4>
          <div class="top">
            <div ref="top01" v-loading="loadingVisible1" class="content">
              <el-table
                :data="tableList"
                v-if="false"
                height="100%"
                :header-cell-style="{
                  background: 'rgba(241,244,247,1)',
                  color: '#000',
                }"
                :row-class-name="tableRowClassName"
                style="width: 100%"
              >
                <el-table-column prop="name" align="center" label="模型名称">
                </el-table-column>
                <!-- <el-table-column
                  prop="value"
                align="center"
                  label="数 量">
                </el-table-column> -->
              </el-table>
            </div>
            <div
              ref="top02"
              v-show="false"
              v-loading="loadingVisible2"
              class="content"
            />
          </div>
        </div>
      </div>

      <div class="right">
        <div ref="top03" v-loading="loadingVisible3" class="content">
          <h4>数据统计</h4>
          <div class="sjtjBox">
            <div
              v-for="(item, index) in customColors"
              :key="index"
              style="padding: 10px 0"
            >
              <p
                style="
                  display: flex;
                  flex-direction: row;
                  justify-content: space-between;
                "
              >
                <span>{{ item.taskName }}</span>
                <span>{{ item.healthValue }}</span>
              </p>
              <el-progress
                :show-text="false"
                :percentage="item.healthValue"
                :color="colors[0]"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="right-top">
      <h4>服务运维</h4>
      <ul v-loading="loadingVisible6" class="rul">
        <li v-for="(item, index) in roptions1" :key="index">
          <div :style="{ border: `2px solid #2778be` }">
            <svg-icon
              :icon-class="iconList2[index]"
              :style="{ fontSize: '60px', color: `#2778be` }"
            />
          </div>
          <p class="name" :style="{ color: `#929a9e` }">{{ item.name }}</p>
          <p class="count" :style="{ color: `${colors[index]}` }">
            {{ item.value }}
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { dataServequeryHomeCount, indexgetServiceInfo, requestLoggetRequestStatusCount, MQMonitorkafka,
  indexgetUseageInfo, dataModelapplygetList, dataSubjectdirectorygetList, indexgetDataSourceRate
} from '@/api/zt/index'
import * as echarts from 'echarts'
import 'echarts-wordcloud'

export default {
  data() {
    return {
      tableList:[],
      btnIsShow: { operate: false },
      loadingText: '加载中……',
      loadingVisible1: false,
      loadingVisible2: false,
      loadingVisible3: false,
      loadingVisible6: false,
      formatter: '{name|{b}}',
      colors: ['#9eb1ff', '#fe9d4e', '#63dead', '#85776e', '#bfca90', '#9a69bc', '#647998'],
      iconList: ['sqlMonitor', 'api', 'jq', 'tm'],
      iconList2: ['international', 'ipvisits', 'bs', 'link', 'list'],
      roptions1: [],
      topInfo: { '0': {}, '1': {}, '2': {}},
      count: 0,
      customColors: []
    }
  },
  created() {

  },
  mounted() {
    this.$nextTick(res => {
      this.indexgetDataSourceRateFun2()
      this.indexgetDataSourceRateFun3()
      this.indexgetServiceInfoFun()
      this.requestLoggetRequestStatusCountFun()
    })
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.top01)

      const option = {
        series: [{
          type: 'wordCloud',
          shape: 'circle',
          left: 'center',
          top: 'center',
          width: '80%',
          height: '90%',
          right: null,
          bottom: null,
          sizeRange: [12, 60],
          rotationRange: [-45, 45],
          rotationStep: 15,
          gridSize: 8,
          drawOutOfBound: false,
          textStyle: {
            normal : {
                  fontFamily:'微软雅黑',
                  color: function() {
                      return 'rgb(' +
                          Math.round(Math.random() * 255) +
                    ', ' + Math.round(Math.random() * 255) +
                    ', ' + Math.round(Math.random() * 255) + ')'
                  }
            }
          },
          emphasis: {
            focus: 'self',
            textStyle: {
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          data:this.tableList
        }]
      }

      chart.setOption(option)

      // 响应式调整
      // window.addEventListener('resize', this.handleResize)
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warningRow'
      } else {
        return ''
      }
    },
    drop01(v) {
      var chartDom = this.$refs.top01
      var myChart = echarts.init(chartDom)
      var option
      const that = this
      var datas = [
        v.values
      ]
      option = {
        title: {
          text: v.title,
          left: 'center',
          textStyle: {
            color: '#555',
            fontWeight: 'normal',
            fontSize: 14
          }
        },

        tooltip: {
          trigger: 'item'
        },
        series: datas.map(function(data, idx) {
          var top = idx * 33.3 + 40
          return {
            type: 'pie',
            radius: [60, 100],
            top: top + '%',
            height: '33.33%',
            left: 'center',
            width: 400,
            minAngle: 30, // 文字重复
            avoidLabelOverlap: true, // 文字重复
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            itemStyle: {
              color: function(params) {
                return that.colors[params.dataIndex]
              }
            },
            label: {
              alignTo: 'edge',
              formatter: that.formatter,
              normal: {
                show: true,
                fontSize: 10,
                formatter: that.formatter,
                rich: {
                  a: {
                    left: 20,
                    padding: [-25, -70, 0, -60] // 位置按需要调整
                  }
                }
              }
            },
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 80
            },
            labelLayout: function(params) {
              const isLeft = params.labelRect.x < myChart.getWidth() / 2
              const points = params.labelLinePoints
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width
              return {
                labelLinePoints: points
              }
            },
            data: data
          }
        })
      }
      option && myChart.setOption(option)
    },
    droppie(v) {
      const srelist = []
      v.values.forEach((item, index) => {
        srelist.push({
          value: item['value'],
          name: item['name']
        })
      })
      var chartDom = this.$refs.top02
      var myChart = echarts.init(chartDom)

      const that = this
      var option

      option = {
        title: {
          text: v.title,
          subtext: ' ',
          left: 'center',
          textStyle: {
            color: '#555',
            fontWeight: 'normal',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'item'
        },
        label: {
          alignTo: 'edge',
          formatter: that.formatter,
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
          rich: {
            time: {
              fontSize: 10,
              color: '#999'
            }
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            data: srelist,
            minAngle: 30, // 文字重复
            avoidLabelOverlap: true, // 文字重复
            itemStyle: {
              color: function(params) {
                return that.colors[params.dataIndex]
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      option && myChart.setOption(option)
    },
    queryTopInfo() {
      dataServequeryHomeCount({}).then(res => {
        this.topInfo = {}
        res.data.forEach((item, index) => {
          const k = Object.keys(item)
          this.topInfo[index] = {
            key: k[0],
            val: item[k[0]]
          }
        })
      })
    },
    indexgetDataSourceRateFun2() {
      this.loadingVisible2 = true
      try {
        indexgetDataSourceRate({ type: 'cluster' }).then(res => {
          this.droppie(res.data)
        })
      } catch (error) {} finally {
        this.loadingVisible2 = false
      }
    },
    indexgetDataSourceRateFun3() {
      this.loadingVisible1 = true
      try {
        indexgetDataSourceRate({ type: 'dataModel' }).then(res => {
          this.tableList = res.data.values
          this.initChart()
          console.log(this.tableList)
          // this.drop01(res.data)
        })
      } catch (error) {} finally {
        this.loadingVisible1 = false
      }
    },
    indexgetServiceInfoFun() {
      this.loadingVisible6 = true
      try {
        indexgetServiceInfo({}).then(res => {
          this.roptions1 = res.data
        })
      } catch (error) {} finally {
        this.loadingVisible6 = false
      }
    },
    requestLoggetRequestStatusCountFun() {
      this.loadingVisible3 = true
      try {
        requestLoggetRequestStatusCount({}).then(res => {
          this.loadingVisible3 = false
          if (res.data && Array.isArray(res.data)) {
            this.customColors = res.data;// [...res.data,...res.data,...res.data,...res.data,...res.data,...res.data,...res.data,...res.data,...res.data,...res.data,...res.data]
          }
        })
      } catch (error) {} finally {}
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";
.svg-icon {
  width: 1em;
  height: 1.6em;
}

>>> .warningRow {
  background: #fcfdfd;
}
>>> ::-webkit-scrollbar {
  display: none;
}
h4 {
  padding: 8px;
  margin-left: 10px;
  border-left: 5px solid $themColor;
  margin: 4px 15px;
  font-size: 15px;
  background: #f5f5f5;
}
.rul {
  display: flex;
  flex-direction: row;
  list-style: none;
  li {
    flex: 1;
    text-align: center;
    padding: 20px 0 12px 0;
    p {
      line-height: 32px;
    }
    div {
      width: 100px;
      height: 100px;
      border-radius: 100%;
      margin: 0 auto;
      line-height: 50px;
      margin-bottom: 10px;
    }
    .name {
      color: #757575;
      letter-spacing: 1px;
      font-size: 14px;
    }
    .count {
      font-size: 30px;
    }
  }
}
.lul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  padding-left: 20px;
  li {
    width: 47%;
    border: 1px solid #dfe6ec;
    height: 84px;
    margin: 10px 10px 0 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    box-sizing: border-box;
    .icon {
      border: 2px solid #3d8aee;
      border-radius: 100%;
      color: #505050;
      text-align: center;
      width: 50px;
      height: 50px;
      line-height: 50px;
      margin: 15px;
    }
    .info {
      flex: 1;
      padding: 12px;
      p {
        line-height: 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color: #999;
        font-size: 10px;
        label {
          font-weight: normal;
        }
        span {
          font-size: 14px;
          background: #f1f3f6;
          display: inline-block;
          width: 50px;
          text-align: center;
          border: 1px solid #fff;
          box-sizing: border-box;
          font-size: 6px;
          border-radius: 2px;
        }
      }
    }
  }
}
.lastul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  padding-left: 20px;
  height: 290px;
  overflow: scroll;
  li {
    width: 46%;
    box-sizing: border-box;
    margin: 6px 5px;
    height: 60px;
    line-height: 60px;
    border: 1px dashed #929292;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    border-radius: 2px;
    span {
      flex: 1;
      text-align: center;
    }
    span:nth-child(1) {
      display: inline-block;
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    span:nth-child(3) {
      font-size: 22px;
    }
    // '#fe9d4e','#6b94ff','#63dead','#e57562','#e3cdee','#9a69bc','#647998'
  }
  li:nth-child(even) {
    border: 1px dashed #fe9d4e;
    background: #fe9d4e25;
    span:nth-child(3) {
      color: #fe9d4e;
    }
  }
  li:nth-child(odd) {
    border: 1px dashed #6b94ff;
    background: #6b95ff2f;
    span:nth-child(3) {
      color: #6b94ff;
    }
  }
}
.indexBj {
  flex-direction: row;
  height: calc(100vh - 430px);
  padding-top: 16px;
}
.indexBj,
.top {
  display: flex;
  justify-content: space-between;
  .top {
    height: 85%;
    margin-bottom: 10px;
    .content {
      flex: 1;
      height: 100%;
      padding: 12px;
    }
  }

  .right {
    width: 45%;
    display: flex;
    flex-direction: column;
    > div {
      margin-bottom: 10px;
      height: 100%;
      .sjtjBox {
        height: 90%;
        overflow-y: scroll;
        padding: 10px;
      }
    }
    .right-center {
      height: 28%;
    }
    .right-bottom {
      flex: 1;
    }
  }
}
.left {
  border-right: 2px solid #f2f5f8;
  width: 65%;
  .leftTop {
    height: 100%;
  }
  .bottom {
    display: flex;
    flex-direction: column;
    flex: 1;
    > div:nth-child(1) {
      height: 220px;
      margin-bottom: 10px;
    }
    > div:nth-child(2) {
      // height:180px;
      flex: 1;
      padding-bottom: 20px;
    }
    .content {
      height: 100%;
    }
    .content:nth-child(1) {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      > div:nth-child(1) {
        width: 67%;
      }
      > div:nth-child(2) {
        width: 32%;
      }
    }
  }
}
</style>
